<template>
	<view>
		<view class="complaint-container">
			<view class="bg">
				<view class=""
					style="display: inline-block; font-size: 35rpx; color: #fff; font-weight: 600; margin-left: 50rpx; line-height: 2rem; position: absolute; top: 70rpx;">
					<view class="">在线客服</view>
					<view class="">随时问您解答</view>
				</view>
				<image src="../../static/service/answer01.png" style="width: 50%; height: 300rpx; margin-left: 50%;">
				</image>
			</view>
			<!-- 内容 -->
			<view class="content">
				<view class="types">
					<view class="types-top">
						<view class="choose-type">请选择类型</view>
						<image src="../../static/images/warn1.png" mode="" style="width: 25rpx; height: 25rpx;"
							class="warn-img"></image>
						<view class="know" @tap="showPopup">须知</view>
					</view>

					<van-popup :show="show" :closeable="true" closeable="true" position="center"
						custom-style="height: 40%; width: 70%; border-radius: 30rpx; padding: 30rpx 15rpx;"
						bind:close="onClose" round @close="closePopup">
						<view class="popup-title">须知</view>
						<view class="popup-item">1.您一天只能提交2次投诉建议，请谨慎操作。</view>
						<view class="popup-item">2.投诉或反馈一般3个工作日内给您受理，如有紧急问题，可直接联系人工客服。</view>
						<view class="popup-item">3.投诉反馈启用匿名提交方式，您的信息将严格保密，不会向外提供。</view>
						<view class="popup-item">4.您应该保证您的的投诉和反馈出于善意，恶意投诉将影响您在平台的信用。</view>
					</van-popup>
					<uni-list>
						<view v-for="(item, index) in title1" :key="index" @click="toComplaintDetail(item)">
							<uni-list-item showArrow :title="item.article_title" class="item-title" />
						</view>
					</uni-list>
				</view>
				<callPhone></callPhone>
			</view>
		</view>
	</view>
</template>

<script>
	import callPhone from "@/components/service/callPhone.vue";
	export default {
		components: {
			callPhone,
		},
		data() {
			return {
				show: false,
				round: true,
				title1: [],
				type: 10,
				name: "",
			}
		},
		onLoad(options) {
			// 页面标题
			uni.setNavigationBarTitle({
				title: options.name
			})
			this.type = options.type;
			this.name = options.name;
			this.width = uni.getSystemInfoSync().windowWidth - 20
			this.getAnwars(options.type)
		},
		methods: {
			toService() {
				uni.switchTab({
					url: '/pages/service/service'
				});
			},
			toComplaintDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pagesB/service/helpcenter/helpcenter?type=${ JSON.stringify(item) }`
				});
			},
			toMyComplaint() {
				uni.navigateTo({
					url: '/pagesB/complaint/myComplaint'
				})
			},
			showPopup() {
				this.show = true
			},
			closePopup() {
				this.show = false
			},
			callPhone() { // 拨打客服电话
				uni.makePhoneCall({
					phoneNumber: '02089814314'
				})
			},
			async getAnwars(type) {
				const {
					data: res
				} = await uni.$http.get(`/Wechat/Help/getCommonProblemType?type=${ type }`)
				console.log(res)
				this.title1 = res.data
			}
		},
		onShareAppMessage() {
			return {
				title: '挺想租 | 租好物分享新生活',
				path: this.$mp.page.route + "?name=" + this.name + "&type=" + this.type
			}
		},
	}
</script>

<style scoped lang="scss">
	.bg {
		background-image: linear-gradient(to right bottom, #f6706e, #ff7e63);
		padding: 0 30rpx;
		border-radius: 0 0 25% 25%;
	}

	.content {
		margin-top: -50rpx;
		padding: 0 20rpx;
	}

	.tips {
		margin-bottom: 60rpx;
	}

	.image {
		width: 100%;
	}

	.warn-img {
		position: relative;
		left: 32%;
	}



	.types {
		border: 1px solid #fff;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 40rpx;
		margin: 0 auto;
		padding: 0 4vw 2vh 4vw;
	}



	.types {
		position: relative;
		margin-top: -20rpx;
		z-index: 999;
	}



	.types-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		line-height: 3rem;
	}

	.know {
		font-size: 25prx;
	}

	.choose-type {
		font-size: 30rpx;
		font-weight: 800;
	}

	.item-title {
		font-size: 30rpx;

		&:after {
			content: '';
			width: 3rpx;
			height: 3rpx;
			background-color: red;
		}
	}

	.popup-title {
		text-align: center;
		font-size: 30rpx;
	}

	.popup-item {
		color: #8f8f8f;
		line-height: 1.5rem;
		font-size: 20rpx;
		margin-top: 20rpx;
	}

	.content {
		font-size: 20rpx;
	}
</style>